
const tmplHint =
    `<div class="hint" style="display: none">       
		  <span>{{hint}}</span>	         
	 </div>
        `;

export default class xHint{

    static getInstance() {
        if(!xHint.instance) {
            xHint.instance = new xHint();
        }
        return xHint.instance;
    }

    static pop(hint,target){
        xHint.getInstance().createHint(hint,target);
    }

    evClose(e){
        let $item;
        let code = e.target.getAttribute("data-code");
        for(let n of this.vShow){
            if (n.find(e.target).length>0) {
                $item = n;
                break;
            }
        }
        if($item)
            this.closeAlert($item,code)
    }

    createHint(hint,target){
        let hintHtml = tmplHint.replace('{{hint}}',hint||'');
        let $item =  $(hintHtml);
        $('body').append($item);
        this.showHint($item,target);
    }

    showHint($item,target){
        let itemWidth  = $item.outerWidth(),itemHeight = $item.outerHeight();
        let targetOffset,targetWidth,targetHeight;
        if(target){
            targetOffset = $(target).offset() ;
            targetWidth = $(target).outerWidth();
            targetHeight = $(target).outerHeight();
        }else{
            targetOffset = {top:0,left:0} ;
            targetWidth =  $('body').width();
            targetHeight = $('body').height();
        }
        $item.css("top",(targetOffset.top+(targetHeight-itemHeight)/2)+'px');
        $item.css("left",(targetOffset.left+(targetWidth-itemWidth)/2)+'px');
        $item.fadeIn("slow");

        setTimeout(()=>{ this.closeHint($item)}
            ,2000)
    }

    closeHint($item){
        $item.fadeOut("slow");
        //1秒后 删除
        setTimeout(()=>{ $item.remove() } ,1000);
    }

}

